<template>
    <view class="page-body">
        <!-- 页面内容开始 -->

        <!-- 表格搜索组件开始 -->
        <vk-data-table-query v-model="queryForm1.formData" :columns="queryForm1.columns"
            @search="search"></vk-data-table-query>
        <!-- 表格搜索组件结束 -->

        <!-- 自定义按钮区域开始 -->
        <view>
            <el-row>
                <el-button type="primary" size="small" @click="exporttable">导出查询</el-button>

            </el-row>
        </view>
        <!-- 自定义按钮区域结束 -->

        <!-- 表格组件开始 -->
        <vk-data-table ref="table1" :action="table1.action" :columns="table1.columns" :query-form-param="queryForm1"
            :right-btns="['detail_auto']" :selection="true" :row-no="true" :pagination="true"  :main-columns="['status', 'order_no', 'booth_id']" @current-change="currentChange" size="mini"
            @selection-change="selectionChange" :right-btns-more="table1.rightBtnsMore">

        </vk-data-table>
        <!-- 表格组件结束 -->

        <!-- 添加或编辑的弹窗开始 -->
        <vk-data-dialog v-model="form1.props.show" :title="form1.props.title" width="1000px" mode="form"
            :close-on-click-modal="false">
            <vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
                :form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
                @success="form1.props.show = false; refresh();"></vk-data-form>
        </vk-data-dialog>
     
    </view>
</template>

<script>
var that;													// 当前页面对象
var vk = uni.vk;									// vk实例
var originalForms = {};						// 表单初始化数据
const statusData = [
    { label: "已关闭", value: -1, tagType: "info" },
    { label: "未支付", value: 0, tagType: "info" },
    { label: "已支付", value: 1, tagType: "success" },
    { label: "已部分退款", value: 2, tagType: "warning" },
    { label: "已全额退款", value: 3, tagType: "danger" },
];
export default {
    keepAlive: true,
    data() {
        // 页面数据变量
        return {
            // 页面是否请求中或加载中
            loading: false,
            // init请求返回的数据
            data: {

            },
            con_show: false,
            contract_info: {

            },
            // 表格相关开始 -----------------------------------------------------------
            table1: {
                // 表格数据请求地址
                action: "admin/bidding-orders/sys/getpayerro",
                // 表格字段显示规则
                columns: [

                    { key: "userinfo.mobile", title: "手机号", type: "text", width: 160, sortable: "custom", },
                    { key: "total_fee", title: "实付金额", type: "money", width: 160, sortable: "custom", },

                    { key: "order.price", title: "合同金额", type: "money", width: 160, sortable: "custom", },
                    
                    { key: "out_trade_no", title: "订单号", type: "text", width: 160, sortable: "custom", },
                    { key: "order.order_no", title: "合同订单号", type: "text", width: 160, sortable: "custom", },
                    { key: "booths.name", title: "展位名称", type: "text", width: 160, sortable: "custom", },
                    {
                        key: "order", title: "订单详情", width: 200, type: "object", width: 400, align: "left",
                        columns: [
                            { key: "_id", title: "用户id", type: "text" },
                            { key: "mobile", title: "手机号码", type: "text" },
                            { key: "realname", title: "真实姓名", type: "text" },
                        ], show: ["detail"]
                    },
                    {
                        key: "booths", title: "展位详情", width: 200, type: "object", width: 400, align: "left",
                        columns: [
                            { key: "_id", title: "用户id", type: "text" },
                            { key: "mobile", title: "手机号码", type: "text" },
                            { key: "realname", title: "真实姓名", type: "text" },
                        ], show: ["detail"]
                    },
                ],
                rightBtnsMore: [

                    {
                        title: '查看合同',
                        show: (item) => {
                            return item.status == 2
                        },
                        onClick: (item) => {
                            this.con_show = true;
                            this.contract_info = item.contract_info
                            // vk.alert(item.contract_info.contract)
                        }
                    },
                ],
                stripe: true,
                size: "mini",
                border: true,
                // 多选框选中的值
                multipleSelection: [],
                // 当前高亮的记录
                selectItem: ""
            },
            // 表格相关结束 -----------------------------------------------------------
            // 表单相关开始 -----------------------------------------------------------
            // 查询表单请求数据
            queryForm1: {
                // 查询表单数据源，可在此设置默认值
                formData: {

                },
                // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
                columns: [
                    { key: "userinfo.mobile", title: "用户手机", type: "text", width: 150, mode: '%%', lastWhereJson: true },
                    {
                        key: "order", title: "订单", type: "select", sortable: "custom", width: 120, size: "small",
                        data: [
                            { value: '___non-existent___', label: "空", },


                        ],
                        mode: "="
                        , lastWhereJson: true
                    },
                    {
                        key: "booths", title: "订单", type: "select", sortable: "custom", width: 120, size: "small",
                        data: [
                            { value: '___non-existent___', label: "空", },


                        ],
                        mode: "="
                        , lastWhereJson: true
                    }

                ]
            },
            form1: {
                // 表单请求数据，此处可以设置默认值
                data: {

                },
                // 表单属性
                props: {
                    // 表单请求地址
                    action: "",
                    // 表单字段显示规则
                    columns: [

                        { key: "name", title: "摊位名称", type: "text", sortable: "custom" },
                        { key: "location", title: "摊位位置", type: "text", sortable: "custom" },

                    ],
                    // 表单验证规则
                    rules: {

                    },
                    // add 代表添加 update 代表修改
                    formType: "",
                    // 是否显示表单的弹窗
                    show: false
                }
            },
            // 其他弹窗表单
            formDatas: {},
            // 表单相关结束 -----------------------------------------------------------
        };
    },
    // 监听 - 页面每次【加载时】执行(如：前进)
    onLoad(options = {}) {
        that = this;
        vk = that.vk;
        that.options = options;
        that.init(options);
    },
    // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
    onReady() { },
    // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
    onShow() { },
    // 监听 - 页面每次【隐藏时】执行(如：返回)
    onHide() { },
    // 函数
    methods: {
        // 页面数据初始化函数
        init(options) {
            originalForms["form1"] = vk.pubfn.copyObject(that.form1);
        },
        renderCanvas(e) {
            console.log('==== renderCanvas :', e)
        },
        savePDF(e) {
            console.log('==== savePDF :', e)
            uni.showLoading({
                title: '导出中'
            })
            base64ToPath(e)
                .then((path) => {
                    uni.openDocument({
                        filePath: path,
                        success: (res) => {
                            console.log('==== openDocument res :', res)
                        },
                        fail: (err) => {
                            console.log('==== openDocument err :', err)
                        }
                    })
                })
                .catch((error) => {
                    console.error('base64ToPath error', error)
                })
                .finally(() => {
                    uni.hideLoading()
                })
        },
        // 页面跳转
        pageTo(path) {
            vk.navigateTo(path);
        },
        // 表单重置
        resetForm() {
            vk.pubfn.resetForm(originalForms, that);
        },
        // 搜索
        search() {
            that.$refs.table1.search();
        },
        // 刷新
        refresh() {
            that.$refs.table1.refresh();
        },
        // 获取当前选中的行的数据
        getCurrentRow() {
            return that.$refs.table1.getCurrentRow();
        },
        // 监听 - 行的选中高亮事件
        currentChange(val) {
            that.table1.selectItem = val;
        },
        // 当选择项发生变化时会触发该事件
        selectionChange(list) {
            that.table1.multipleSelection = list;
        },
        // 监听 - 批量操作的按钮点击事件
        batchBtn(index) {
            switch (index) {
                case 1: vk.toast("批量操作按钮1"); break;
                case 2: vk.toast("批量操作按钮2"); break;
                default: break;
            }
        },
        exporttable() {
            this.$refs.table1.exportExcel({
                fileName: "用户订单",
                title: "正在导出数据...",
                pageIndex: 1,
                pageSize: -1, // 此值为-1，代表导出所有数据
            });
        },
        async refunt(order) {
            vk.confirm(`此操作不可逆,是否取消当前用户订单??`, (res) => {
                if (res.confirm) {
                    vk.callFunction({
                        url: 'admin/bidding-orders/sys/refundOrder',
                        title: '请求中...',
                        data: {
                            _id: order._id,
                        },
                        success: async (data) => {
                            vk.alert(data.msg)
                            that.$refs.table1.refresh();
                        }
                    });
                }
            })

        },
    },
    // 监听属性
    watch: {

    },
    // 过滤器
    filters: {

    },
    // 计算属性
    computed: {

    }
};
</script>
<style lang="scss" scoped>
.page-body {}
</style>
